<template>
  <div class="basic-tips-bar">
    <component :is="config.icon"></component>
    <section>
      <slot></slot>
      <div class="tips-text">{{ text }}</div>
    </section>
  </div>
</template>

<script setup lang="ts">
import PrimaryIcon from '~icons/icons/info.svg'
import WarningIcon from '~icons/icons/warning.svg'
import DangerIcon from '~icons/icons/danger.svg'
import SuccessIcon from '~icons/icons/success.svg'
interface IProps {
  type?: 'primary' | 'warning' | 'danger' | 'success'
  text?: string
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'primary'
})

const map = {
  primary: {
    bg: '#E8F3FF',
    color: '#164CFF',
    icon: h(PrimaryIcon)
  },
  warning: {
    bg: '#FEF2E6',
    color: '#FF6805',
    icon: h(WarningIcon)
  },
  danger: {
    bg: '#FFECE8',
    color: '#F53F3F',
    icon: h(DangerIcon)
  },
  success: {
    bg: '#E5F7E9',
    color: '#00B324',
    icon: h(SuccessIcon)
  }
}

const config = computed(() => {
  return map[props.type]
})
</script>

<style scoped lang="less">
.basic-tips-bar {
  @apply text-[#454954] py-2 px-4  rounded flex items-center gap-x-2;
  background-color: v-bind('config.bg');
  .tips-text {
    @apply text-sm/22px;
  }
  .svg-icon {
    color: v-bind('config.color') !important;
    fill: currentColor !important;
  }
}
</style>
